<template>
    <div class="productSchedule-index yuan-container container">
        <a-card title="生产进度">
            <div style="margin-bottom: 10px;">
                <a-alert message="生产进度数据来源于生产日报表，请先在生产日报表中录入数据" type="info" close-text="关闭" />
            </div>
            <div class="filter-panel">
                <div class="filter-list">
                    <span>品名：</span>
                    <a-input-search allowClear v-model="pageParams.productName" placeholder="请输入关键字" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>标准：</span>
                    <a-select v-model="pageParams.standard" @change="resetList" allowClear placeholder="请选择标准">
                        <a-select-option value="国标">国标</a-select-option>
                        <a-select-option value="省标">省标</a-select-option>
                        <a-select-option value="省标-北京">省标-北京</a-select-option>
                        <a-select-option value="省标-上海">省标-上海</a-select-option>
                        <!--                        <a-select-option value="国标-北京">国标-北京</a-select-option>-->
                    </a-select>
                </div>
                <!-- <div class="filter-list">
                    <span>产品大类：</span>
                    <a-select v-model="pageParams.inventoryType" @change="resetList" allowClear placeholder="请选择大类">
                        <a-select-option v-if="pageParams.standard == '国标'" value="C60">C60</a-select-option>
                        <a-select-option v-if="pageParams.standard == '国标'" value="C70">C70</a-select-option>
                        <a-select-option v-if="pageParams.standard == '省标'" value="C80">C80</a-select-option>
                        <a-select-option v-if="pageParams.standard == '省标'" value="C90">C90</a-select-option>
                        <a-select-option v-if="pageParams.standard == '省标-北京'" value="C81">C81</a-select-option>
                        <a-select-option v-if="pageParams.standard == '省标-上海'" value="C82">C82</a-select-option>
                        <a-select-option v-if="pageParams.standard == '省标-北京'" value="C91">C91</a-select-option>
                        <a-select-option v-if="pageParams.standard == '省标-上海'" value="C92">C92</a-select-option>
                    </a-select>
                </div> -->
                <div class="filter-list">
                    <span>选择日期：</span>
                    <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']" :valueFormat="'YYYY-MM-DD'" />
                </div>
                <div class="filter-list" style="margin-right: 10px;">
                    <span>产品大类：</span>
                    <a-select v-model="pageParams.inventoryType" allowClear placeholder="请先选择标准" @change="typeChange">
                        <a-select-option  value="C60">C60</a-select-option>
                        <a-select-option  value="C70">C70</a-select-option>
                        <a-select-option  value="C80">C80</a-select-option>
                        <a-select-option  value="C90">C90</a-select-option>
                        <a-select-option  value="C81">C81</a-select-option>
                        <a-select-option  value="C82">C82</a-select-option>
                        <a-select-option  value="C91">C91</a-select-option>
                        <a-select-option  value="C92">C92</a-select-option>
                    </a-select>
                    <span>可销售天数：</span>
                    <a-select
                        style="width: 100px; margin-right: 8px"
                        placeholder="请选择"
                        allowClear
                        @change="onSellDayChange"
                    >
                        <a-select-option :value="30">30天</a-select-option>
                        <a-select-option :value="60">60天</a-select-option>
                        <a-select-option :value="90">90天</a-select-option>
                    </a-select>
                    <span>或</span>
                </div>
                <div class="filter-list">
                    <a-input-group compact style="width: 220px; margin-left: 8px;">
                        <a-input-number
                            v-model="pageParams.sellDayStart"
                            placeholder="最小天数"
                            style="width: 90px"
                            @change="onSellDayRangeChange"
                        />
                        <span style="margin: 0 4px;">~</span>
                        <a-input-number
                            v-model="pageParams.sellDayEnd"
                            placeholder="最大天数"
                            style="width: 90px"
                            @change="onSellDayRangeChange"
                        />
                    </a-input-group>
                </div>
            </div>
            <div class="table">
                <a-table bordered :rowKey="(row)=>row.id" :data-source="pageList" :columns="columns" :pagination="pagination"
                    :loading="loading">

                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button type="primary" @click="showDetail(record)">详情</a-button>
                        </div>
                    </template>
                    <template slot='proLine' slot-scope="text, record, index">
                        <div class="proline-parent">
                            <div class="proline-box line-box">
                                <template v-for="(item,idx) in record.planProgressObj">
                                    <a-popover :key="'popover-'+idx">
                                        <template slot="content">
                                            <div v-if="item.info">
                                                <template v-if="getInfoData(item.info).inputBatch">
                                                    投料批号:
                                                    <div v-for="(batch, batchIndex) in getBatchData(getInfoData(item.info).inputBatch)" :key="'batch-'+batchIndex">
                                                        {{ batch }}
                                                    </div>
                                                </template>
                                                <template v-if="
                                                getInfoData(item.info).C60 || 
                                                getInfoData(item.info).C61 || 
                                                getInfoData(item.info).C70 || 
                                                getInfoData(item.info).C71 ||
                                                getInfoData(item.info).C80 ||
                                                getInfoData(item.info).C81 ||
                                                getInfoData(item.info).C90 ">
                                                    <div v-for="(code, codeIndex) in getInfoData(item.info).C60" :key="'c60-'+codeIndex">
                                                        C60：{{ code }}
                                                    </div>
                                                    <div v-for="(code, codeIndex) in getInfoData(item.info).C61" :key="'c61-'+codeIndex">
                                                        C61：{{ code }}
                                                    </div>
                                                    <div v-for="(code, codeIndex) in getInfoData(item.info).C70" :key="'c70-'+codeIndex">
                                                        C70：{{ code }}
                                                    </div>
                                                    <div v-for="(code, codeIndex) in getInfoData(item.info).C71" :key="'c71-'+codeIndex">
                                                        C71：{{ code }}
                                                    </div>
                                                    <div v-for="(code, codeIndex) in getInfoData(item.info).C80" :key="'c80-'+codeIndex">
                                                        C80：{{ code }}
                                                    </div>
                                                    <div v-for="(code, codeIndex) in getInfoData(item.info).C81" :key="'c81-'+codeIndex">
                                                        C81：{{ code }}
                                                    </div>
                                                    <div v-for="(code, codeIndex) in getInfoData(item.info).C90" :key="'c90-'+codeIndex">
                                                        C90：{{ code }}
                                                    </div>
                                                </template>
                                                <!-- 成品检测 -->
                                                <template v-if="getInfoData(item.info).length">
                                                    <div v-for="(jack,i) in getInfoData(item.info)" :key="'jack-'+i">
                                                        <span style="margin-right: 10px;">{{ jack.isCheck }}</span>
                                                        <span>{{ jack.type }}：</span>
                                                        <span>{{ jack.batch }}</span>
                                                    </div>
                                                </template>
                                            </div>
                                            <span v-else>暂无信息</span>
                                        </template>
                                        <div class="proline-list proline-line" :class="getProlineClass(idx,item)"
                                            v-if="idx<=item.serial+1"></div>
                                    </a-popover>
                                </template>
                            </div>

                            <div class="proline-box">
                                <template v-for="(item,idx) in record.planProgressObj">
                                    <div class="proline-list" :class="getProlineWordsClass(idx,item)"
                                        v-if="idx<=item.serial+1">{{item.progressName}}{{getProlineNotFinished(idx,item)}}</div>
                                </template>
                            </div>
                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :info="showDetailInfo"/>
    </div>
</template>
<script lang="ts">
import warningApi from "@/api/warningApi";
import { Vue, Component } from "vue-property-decorator";
import DetailVue from "./components/detail.vue";
import nextApi from "@/api/nextApi";
import {h} from 'vue';
@Component({
    name: "dom",
    components: { DetailVue },
})
export default class index extends Vue {
    loading = false;
    pageType = "包装计划";
    pagination = {
        pageSize: 100000,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    pageList: any[] = [];
    columnsTpl = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "batchNumber",
            key: "batchNumber",
            title: "提取批号",
        },
        {
            align: "center",
            dataIndex: "productionDate",
            key: "productionDate",
            title: "提取日期",
            width:110,
        },
        {
            align: "center",
            dataIndex: "productName",
            key: "productName",
            title: "品名",
            width: 120,
        },
        {
            align: "center",
            dataIndex: "standard",
            key: "standard",
            title: "标准",
        },
        {
            align: "center",
            dataIndex: "materialCode",
            key: "materialCode",
            title: "物料代码",
        },
        {
            align: "center",
            dataIndex: "sellDay",
            key: "sellDay",
            title: "成品可销售天数",
            width: 150,
            customRender: (text, record, i) => {
                if (record.sellDayInfo) {
                    let arr = JSON.parse(record.sellDayInfo);
                    return arr.map(item =>
            h(
                'a-tag',
                {
                    props: { color: 'blue' }, // 可自定义颜色
                    style: { margin: '0 0 4px 0',fontSize:'15px',width:'100%' }
                },
                [`装量：${item.loadingQuantity}g ${item.inventoryType} ${item.availableSellDay}天`]
            )
        );
                }
            }
        },
        {
            align: "center",
            title: "已完成工序",
            width: 150,
            customRender:(text,record,index)=>{
                let arr = record.processProgressList.filter(item => item.finishState).map(item => item.progressName)
                return arr.join('、')
            }
        },
        {
            align: "center",
            dataIndex: "productionTime",
            key: "productionTime",
            title: "当前进度",
            width: 550,
            scopedSlots: { customRender: "proLine" },
        },
        // {
        //     align: "center",
        //     dataIndex: "action",
        //     key: "action",
        //     title: "操作",
        //     width: 200,
        //     scopedSlots: { customRender: "action" },
        // },
    ];
    pageParams:any = {
        beginTime: "",
        endTime: "",
        productName: "",
        standard: undefined,
        productionType: undefined,
        type: "提取",
        inventoryType:'',
        sellDayStart:'',
        sellDayEnd:'',
    };
    columns: any[] = [];
    async getList() {
        this.pageList = [];
        this.columns = this.columnsTpl.slice(0, this.columnsTpl.length);
        try {
            this.loading = true;
            // 处理可销售天数参数
            let params = {
                page: this.pagination.current,
                pageSize: this.pagination.pageSize,
                ...this.pageParams,
            };
            const res = await nextApi.getProductionTableList(params);
            this.pagination.total = res.data?.total || 0;
            const pageList = res.data?.rows || [];
            this.pageList = pageList.map((item) => {
                if(item.processProgressList){
                    const progress = item.processProgressList;
                    const lastInfo = progress[progress.length - 1] || {};
                    const lastState = lastInfo.state || "";
                    const lastName = lastInfo.progressName || "";
                    return {
                        ...item,
                        planProgressObj: progress,
                        schidx: progress.length,
                        lastName: lastName,
                        isTimeout: lastState === "已超时" ? true : false,
                    };
                }
                
            });
        } finally {
            this.loading = false;
            //将滚动条设置为最右边
            this.$nextTick(() => {
                let prolineBoxs = document.getElementsByClassName("proline-parent");
                for (let i = 0; i < prolineBoxs.length; i++) {
                    prolineBoxs[i].scrollLeft = prolineBoxs[i].scrollWidth;
                }
            });
        }
    }
    dateChange(v){
        this.pageParams.beginTime = v[0]
        this.pageParams.endTime = v[1]
        this.getList()
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;

        this.getList();
    }
    mounted() {
        this.getList();
    }


    detailVisible = false;
    showDetailInfo={}
    showDetail(item) {
        this.showDetailInfo=item
        this.detailVisible = true;
    }
    getProlineClass(idx, item) {
        // 当前进度（未完成的第一个进度）
        if (!item.finishState) {
            return "proline-dot-notFinished";
        }
        // 已完成的进度
        else if (item.finishState) {
            return "proline-over";
        }
        // 未开始的进度
        else {
            return "proline-timeOut";
        }
    }
    getProlineWordsClass(idx, item) {
        // 当前进度（未完成的第一个进度）
        if (!item.finishState) {
            return "proline-words-notFinished";

        }
        // 已完成的进度
        else if (item.finishState) {
            return "proline-words-finished";
        }
        // 未开始的进度
        else {
            return "proline-words-after";
        }
    }
    getProlineNotFinished(idx, item) {
        // 当前进度（未完成的第一个进度）
        if (!item.finishState) {
            return "(进行中)";
        }
        return "";
    }
    getInfoData(info) {
        try {
            return JSON.parse(info);
        } catch (e) {
            console.error('解析info数据失败:', e);
            return {};
        }
    }
    getBatchData(batchStr) {
        try {
            return JSON.parse(batchStr);
        } catch (e) {
            console.error('解析batch数据失败:', e);
            return [];
        }
    }
    typeChange(v){
        if(!v)return
        let {sellDayStart,sellDayEnd} = this.pageParams
        if(sellDayStart && sellDayEnd){
            this.resetList();
        }
    }
    onSellDayChange(v:number) {
        if(this.pageParams.inventoryType){
            if(!v){
                this.pageParams.sellDayStart = undefined
                this.pageParams.sellDayEnd = undefined
            }else{
                this.pageParams.sellDayStart = 1
                this.pageParams.sellDayEnd = v
            }
            this.resetList();
        }else{
            this.$message.info('请选择产品大类')
        }
            
        
    }
    onSellDayRangeChange() {
        if(this.pageParams.inventoryType){
            this.resetList();
        }else{
            this.$message.info('请选择产品大类')
        }
    }
}
</script>
<style lang="scss">
.productSchedule-index {
    .proline-parent {
        width: 700px;
        overflow: auto;
        padding: 5px 0;
        text-align: left;
        line-height: 16px;
    }
    .proline-box {
        display: flex;
    }
    .line-box {
        margin-bottom: 5px;
        transform: translateX(5px);
        display: flex;
    }
    .proline-list {
        display: inline-block;
        width: 100px;
        flex-shrink: 0;
        color: #409eff;
    }
    .proline-line {
        height: 6px;
        background-color: #f9f9f9;
    }
    .proline-line:last-child {
        width: 10px;
        background-color: transparent;
    }
    //初始化点
    .proline-line::before {
        content: "";
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 10px;
        vertical-align: top;
        position: relative;
        top: -2px;
    }
    //完成状态的线
    .proline-over {
        background-color: rgba(27, 196, 109, 0.3);
    }
    //完成状态的点
    .proline-over::before {
        background-color: #1bc46d;
    }
    //完成状态的字
    .proline-words-finished {
        color: #919191;
    }
    //超时状态的字
    .proline-words-timeout {
        color: #fe3d3d;
    }
    //超时状态的线
    .proline-timeout {
        background-color: #fe3d3d;
    }
    //超时状态的点
    .proline-timeout::before {
        background-color: #fe3d3d;
    }
    
    //未完成状态的点
    .proline-dot-notFinished::before{
        background-color: #409eff;
    }
    //未完成状态的字
    .proline-words-notFinished{
        color: #0e0e0e;
    }
}
</style>
